<!-- 男女比例组件 进度条是采用echarts中2个柱状图实现的 -->
<template>
  <div class="sex">
    <div class="top">
      <div>男女比例</div>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 底部  -->
    <div class="bom">
      <div class="person_info">
        <!-- 头像部分 -->
        <div class="show_image">
          <div class="man">
            <span>男士</span>
            <img class="man_img" src="../images/man.png" alt="" />
          </div>
          <div class="women">
            <span>女士</span>
            <img class="women_img" src="../images/woman.png" alt="" />
          </div>
        </div>
        <!-- 进度条部分 -->
        <div class="pb">
          <!-- 顶部的男士和女士部分 -->
          <div class="data_info">
            <span>男士68%</span>
            <span>女士42%</span>
          </div>
          <!-- 进度条的绘制 -->
          <div ref="pb_chart" class="pb_line"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//引入echarts
import * as echarts from "echarts";
//引入echarts的配置项
import { barOption } from "@/config/echarts/config";
//初始化柱状图
let pb_chart = ref();
onMounted(() => {
  let myCharts = echarts.init(pb_chart.value);
  //配置数据主要是是liquidfillOption.series[0].data
  myCharts.setOption(barOption);
});
</script>

<style lang="scss" scoped>
.sex {
  margin-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: url(../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;

  .top {
    margin-left: 14px;
    color: white;
    font-size: 16px;
  }

  .bom {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .person_info {
      width: 70%;
      .show_image {
        display: flex;
        justify-content: space-between;
        color: white;

        .man {
          display: flex;
          width: 111px;
          height: 115px;
          flex-direction: column;
          align-items: center;
          background: url(../images/man-bg.png) no-repeat;
          background-size: 100% 100%;
          .man_img {
            margin-top: 15px;
            width: 61px;
            height: 61px;
          }
        }
        .women {
          display: flex;
          width: 111px;
          height: 115px;
          flex-direction: column;
          align-items: center;
          background: url(../images/woman-bg.png) no-repeat;
          background-size: 100% 100%;
          .women_img {
            margin-top: 15px;
            width: 61px;
            height: 61px;
          }
        }
      }
    }

    .pb {
      width: 100%;

      .data_info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        color: white;
      }

      .pb_line {
        width: 100%;
        height: 40px;
        margin-top: 4px;
      }
    }
  }
}
</style>
